<template>
  <div class="box">
    <a-form :model="formState" name="horizontal_login" layout="inline" autocomplete="off">
      <a-form-item>

        <a-input  v-model="input" placeholder="公司名称"></a-input>
      </a-form-item>
      <a-form-item>
        <a-range-picker v-model:value="formState.time" :placeholder="['编辑开始日期', '编辑结束日期']" />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" html-type="submit" :icon="h(SearchOutlined)" @click="getData">查询</a-button>
      </a-form-item>
    </a-form>
    <div style="margin-top: 30px;">
      <el-table :data="tableData" :header-cell-style="{ backgroundColor: '#ECF4FF', color: '#333333' }"
        :row-class-name="tableRowClassName" style="width: 100%">
        <el-table-column prop="address" label="客户名称（公司抬头）">
        </el-table-column>
        <el-table-column prop="name" label="最新动态">
        </el-table-column>
        <el-table-column prop="date" label="时间" width="100">
        </el-table-column>
      </el-table>
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
    >
    </el-pagination>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { h } from "vue";
import { SearchOutlined } from "@ant-design/icons-vue";
const formState = ref({
  username: "",
  time: "",
});
const currentPage4  =  ref(4)
const tableData = [{
  date: '2016-05-03',
  name: '最新标讯名称',
  address: '公司名称（全称',
}, {
  date: '2016-05-02',
  name: '最新标讯名称',
  address: '公司名称（全称',
}, {
  date: '2016-05-04',
  name: '最新标讯名称',
  address: '公司名称（全称',
}, {
  date: '2016-05-01',
  name: '最新标讯名称',
  address: '公司名称（全称',
},]
const handleSizeChange =(val)=> {
        console.log(`每页 ${val} 条`)
      }
      const handleCurrentChange =(val)=> {
        console.log(`当前页: ${val}`)
      }
      
</script>

<style lang="scss" scoped>
.el-pagination{
  margin-top: 28px;
}
/* 添加隔行变色的CSS */
:deep(.el-table .el-table__body tr.el-table__row:nth-child(even)) {
  background-color: #EDF0F6;
}

:deep(el-table .el-table__body tr.el-table__row:nth-child(odd)) {
  background-color: #ffffff;
}
</style>